@import url('../../style.less');
.page{
	background-color: #eeeef4;
}
.yellow{
	background-color: #c7bc1d !important;
}
.red{
	background-color: #ff007f !important;
}
.green{
	background-color: #348d43 !important;
}

.summary-container{
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	padding: 35rpx;
	margin-bottom: 30rpx;
	.user-info{
		display: flex;
		.photo{
			width: 100rpx;
			height: 100rpx;
		}
		.info{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 25rpx;
			.username{
				display: block;
				font-size: 44rpx;
				font-weight: bold;
				color: @font-color;
			}
			.dept{
				display: block;
				font-size: 28rpx;
				color: @font-color;
			}
		}
	}
	.date{
		font-size: 38rpx;
		margin-bottom: auto;
		margin-top: auto;
		color: @background-color;
	}
}
.result-container{
	display: flex;
	background-color: #fff;
	padding: 35rpx;
	margin-bottom: 30rpx;
	.left{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 330rpx;
		margin-right: 30rpx;
		.icon-time{
			width: 40rpx;
			height: 40rpx;
			&:first-child{
				margin-top: 5rpx;
			}
		}
		.line{
			position: absolute;
			height: 225rpx;
			width: 0%;
			border-left: solid grey 2rpx;
			left: 20rpx;
			top: 55rpx;
		}
	}
	.right{
		.row{
			display: flex;
			margin-bottom: 31rpx;
			.start,.end{
				font-style: 32rpx;
				color: @background-color;
			}
			.checkin-time{
				font-size: 38rpx;
				font-weight: bold;
				color: @font-color;
				display: block;
			}
			.checkin-result{
				background-color: #fff;
				display: block;
				font-size: 26rpx;
				height: 42rpx;
				line-height: 42rpx;
				padding: 0 15rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				color: #fffff0;
			}
			.other{
				margin-top: 7rpx;
				margin-left: 10rpx;
			}
			.icon-small{
				width: 38rpx;
				height: 38rpx;
				margin-right: 10rpx;
				margin-top: 7rpx;
			}
			.desc{
				color: #999;
				font-style: 32rpx;
			}
		}
	}
}

.checkin-report{
	background-color: #fff;
	padding: 35rpx;
	.big-icon{
		display: block;
		width: 250rpx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 25rpx;
	}
	.report-title{
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		
		.days{
			font-size: 60rpx;
			color: @font-color;
		}
		.unit{
			font-size: 30rpx;
			margin-left: 10rpx;
			margin-top: auto;
			margin-bottom: auto;
		}
	}
	.sub-title{
		font-size: 34rpx;
		color:@font-color;
		text-align: center;
		margin-top: 10rpx;
		position: relative;
		text{
			background-color: #fff;
			z-index: 999;
			position: relative;
			padding: 0 30rpx;
		}
		.line{
			height: 0;
			width: 100%;
			border-bottom: solid brown 2rpx;
			position: absolute;
			top: 22rpx;
		}
	}
	.calendar-container{
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		.calendar{
			text-align: center;
			flex-grow: 0;
			flex-shrink: 0;
			.calendar-icon{
				width: 70rpx;
				display: block;
				margin-bottom: 5rpx;
			}
			.day{
				font-size: 32rpx;
				color: @font-color;
				display: block;
			}
			.result{
				color: #fff;
				display: block;
				font-size: 26rpx;
				height: 42rpx;
				line-height: 42rpx;
				border-radius: 8rpx;
				padding: 0 5rpx;
				margin-top: 10rpx;
			}
		}
	}
}